<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <companys-search @get-list="getList"></companys-search>
        <!-- 新增试题 -->
        <!-- <el-row type="flex" justify="space-between">
          <el-col :span="4"
            ><div class="grid-content description">
              说明：目前支持学科和关键字条件筛选
            </div></el-col
          >

          <el-col :span="1.5"
            ><div class="grid-content bg-purple">
              <el-button
                size="small"
                type="success"
                @click="$router.push('/questions/new')"
                ><i class="el-icon-edit"></i>新增试题</el-button
              >
            </div></el-col
          >
        </el-row> -->

        <!-- 检索 -->
        <!-- <questions-filter
          @changeList="changeList"
          :paramsPage="params.page"
          :paramsPagesize="params.pagesize"
        ></questions-filter> -->

        <!-- 数据总条数 -->
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-light">
              <span style="margin-left: 10px">
                <i class="el-icon-info"></i>数据一共{{ params.total }}条
              </span>
            </div></el-col
          >
        </el-row>
        <!-- 表格 -->
        <el-table :data="list" stripe style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="280">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="150">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="150">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="150">
            <template #default="{ row }">
              {{ hireEnum[row.questionType] }}
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="220">
            <template #default="{ row }">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default="{ row }">
              {{ formatDate(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="150">
            <template #default="{ row }">
              {{ diffEnum[row.difficulty] }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="150">
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="{ row }">
              <!-- 预览按钮 -->
              <el-button
                size="small"
                type="primary"
                icon="el-icon-view"
                circle
                plain
                @click="prevDialog(row)"
              ></el-button>
              <!-- 修改按钮 -->
              <el-button
                size="small"
                type="success"
                icon="el-icon-edit"
                circle
                plain
                @click="update(row)"
              ></el-button>
              <!-- 删除按钮 -->
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="deleteQusetion(row)"
              ></el-button>
              <!-- 精选按钮 -->
              <el-button
                size="small"
                type="warning"
                icon="el-icon-check"
                circle
                plain
                @click="curation(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <!-- :page-size="params.size" 当前页码条目个数 -->
        <!-- :current-page="params.page" 当前页数 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.size"
          layout=" ->, prev, pager, next,sizes,  jumper"
          :total="params.total"
          :background="true"
        >
        </el-pagination>
      </el-card>

      <!-- 弹层  -->
      <!-- <QuestionsPreview ref="questions-preview" /> -->
      <!-- <el-dialog title="题目预览" :visible="showDialog" @close="closeDialog">
        <questions-preview :form="form"></questions-preview>
      </el-dialog> -->
    </div>

    <!-- 题目预览对话框 -->
    <questions-perview
      :dialogVisible="dialogVisible"
      @closeDialog="closeDialog"
      :detailList="detailList"
    ></questions-perview>
  </div>
</template>

<script>
import questionsFilter from './companys/qusstionsFilter.vue'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions.js'
import dayjs from 'dayjs'
import questionsPerview from '../components/questions-preview.vue'
import CompanysSearch from './companys/companys-search.vue'

export default {
  components: {
    questionsPerview,
    questionsFilter,
    CompanysSearch
  },

  data () {
    return {
      // 基础题库列表
      list: [],
      // 题目条数
      counts: 0,
      // 题目数据详情
      detailList: {},
      // 分页
      params: {
        // 当前页数
        page: 1,
        // 每页条目
        pagesize: 10, // 被后台数据直接绑定了 所以点击数据也无法更改
        total: 1
      },
      // 枚举 题型
      hireEnum: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 枚举 难度
      diffEnum: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 控制弹窗开关
      dialogVisible: false
    }
  },
  methods: {
    // 获取基础题库列表
    async getList (data) {
      const res = await list(data)
      // console.log(res)
      this.list = res.data.items
      // this.counts = res.data.counts
      // 当前页数
      // this.params.page = +res.data.page
      // 每页条目
      // this.params.size = +res.data.pagesize
      this.params.total = +res.data.counts
    },
    // 获取基础题库详情
    async getDetailList (data) {
      // 不全数据
      // console.log(data)
      const res = await detail(data)
      // console.log(res)
      this.detailList = res.data
      // 全数据
      console.log(this.detailList)
    },
    // 更改每页显示条目时触发的函数
    handleSizeChange (newPage) {
      console.log(newPage)
      this.params.pagesize = newPage
      // 渲染数据
      this.getList()
    },
    // 当前页改变时触发的函数
    handleCurrentChange (val) {
      // console.log(`当前页是${val}`)
      // 当前页数
      this.params.page = val
      // 重新渲染
      this.getList()
    },
    // 时间转换的方法
    formatDate (dateValue) {
      return dayjs(dateValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点击预览按钮 打开对话框
    prevDialog (data) {
      // 打开弹窗开关
      this.dialogVisible = true
      // 获取基础题库详情

      this.getDetailList(data)
    },
    // 关闭弹窗
    closeDialog () {
      this.dialogVisible = false
    },
    // 删除题目条目
    deleteQusetion (data) {
      // 询问用户
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调接口删数据
        await remove(data)
        // 重新渲染列表
        this.getList()
        // 弹窗提示
        this.$message.success('删除成功')
      })
    },
    // 点击修改跳转试题录入界面
    async update (data) {
      // const res = await update(data)
      console.log(data) // 有id
      this.$router.push(`/questions/new?id=${data.id}`)
      // const res = await update(data)
      // console.log(res)
    },
    // 将题目精选
    curation (data) {
      console.log(data)
      // // 获取详细数据
      // const res = await detail(data)
      // console.log(res)
      // 询问用户
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 调接口删数据
          await choiceAdd({
            id: data.id,
            choiceState: 1
          })
        })
        .then(() => {
          // 重新渲染列表
          this.getList()
          // 弹窗提示
          this.$message.success('加入精选成功')
        })
    },
    // 筛选数据回显
    changeList (res) {
      this.list = res.data.items
    }
  },
  created () {
    this.getList()
    // this.getDetailList()
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background-color: #f4f4f5;
  color: #909399;
  font-size: 13px;
  align-items: center;
  /* height: 30px; */
  line-height: 40px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.description {
  font-size: 14px;
  color: pink;
}
</style>
